<script>
// mapState放在计算属性中使用
import { mapState } from 'vuex'
import { House, User, Promotion, Flag } from '@element-plus/icons-vue'
export default {
  data() {
    return {}
  },
  computed: {
    // 拿到vuex中的数据
    ...mapState(['userInfo', 'currentPath'])
  },
  components: {
    House,
    User,
    Promotion,
    Flag
  },
  //接收父组件传递过来的属性
  props: ['collapse']
}
</script>
<template>
  <!-- 如果需要实现我们menu点击可以修改页面,那么我们需要在menu组件中添加router属性,第二步操作是在menu--item中添加属性index,其对应的值是要跳转的路径 -->

  <!-- collapse 标签菜单是否需要展开 -->
  <el-menu :default-active="currentPath" :unique-opened="true" router class="el-menu-vertical-demo" :collapse="collapse">
    <el-menu-item index="/">
    <el-icon>
      <Flag />
    </el-icon>
    <template #title>
      <span>首页</span>
    </template>
  </el-menu-item>

    <el-sub-menu v-for="item in userInfo.checkedkeys" :key="item.path" :index="item.path">
      <template #title>
        <el-icon>
          <Promotion />
        </el-icon>
        <span>{{ item.label }}</span>
      </template>
      <el-menu-item v-for="child in item.children" :key="child.path" :index="`/${item.path}/${child.path}`">{{ child.label
      }}</el-menu-item>
      <!-- <el-menu-item index="/manager/userlist">用户列表</el-menu-item> -->
    </el-sub-menu>


    <!-- <el-sub-menu index="/banner">
                                  <template #title>
                                    <el-icon>
                                      <Promotion />
                                    </el-icon>
                                    <span>管理员</span>
                                  </template>
                                  <el-menu-item index="/manager/managerlist">管理员列表</el-menu-item>
                                </el-sub-menu> -->

  </el-menu>
</template>